<template>
  <view class="container">
    <view class="success-content">
      <image src="/static/home/dddk.png" class="success-icon" mode="aspectFit"></image>
      <view class="success-title">打卡成功</view>
      <view class="success-message">
        {{ checkType === '1' ? '已完成到店打卡' : '已完成离店打卡' }}
      </view>
      <view class="countdown">
        即将跳转到首页 <text class="countdown-number">{{ countdown }}</text>s
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

// 响应式数据
const countdown = ref(5)
const checkType = ref('1') // '1'到店，'2'离店，默认到店打卡
let timer = null

// 启动倒计时
const startCountdown = () => {
  timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timer)
      // 跳转到首页
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
  }, 1000)
}

// 页面加载
onMounted(() => {
  // 方法1：通过getCurrentPages获取路由参数
  try {
    const pages = getCurrentPages()
    const currentPage = pages[pages.length - 1]
    if (currentPage && currentPage.options && currentPage.options.type) {
      checkType.value = currentPage.options.type
    }
  } catch (e) {
    console.error('获取打卡类型失败', e)
  }
  
  startCountdown()
})

// 页面卸载时清理
onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #F2F3F5;
}

.success-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx;
}

.success-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 40rpx;
}

.success-title {
  font-size: 48rpx;
  font-weight: 600;
  color: #00bd86;
  margin-bottom: 20rpx;
}

.success-message {
  font-size: 32rpx;
  color: #7C8288;
  margin-bottom: 60rpx;
}

.countdown {
  font-size: 28rpx;
  color: #B8B8B8;
}

.countdown-number {
  color: #00bd86;
  font-weight: 600;
  font-size: 36rpx;
}
</style>